<template>
  <el-form :model="person" class="w-50 mx-auto mt-5 border pt-5 pb-5">
    <el-form-item>
      <el-row class="mx-auto px-auto fs-3">
        <el-col>个人信息</el-col>
      </el-row>
    </el-form-item>

    <el-form-item>
      <el-row class="mx-auto w-50">
        <el-col :span="6" class="text-end">
          <span>用户名：</span>
        </el-col>
        <el-col :span="18">
          <el-input v-model="person.username" placeholder="用户名"></el-input>
        </el-col>
      </el-row>
    </el-form-item>
    
    <el-form-item>
      <el-row class="mx-auto w-50">
        <el-col :span="6" class="text-end">
          <span>修改密码：</span>
        </el-col>
        <el-col :span="18">
          <el-input v-model="person.password" placeholder="密码"></el-input>
        </el-col>
      </el-row>
    </el-form-item>

    <el-form-item>
      <el-row class="mx-auto w-50">
        <el-col :span="6" class="text-end">
          <span>性别：</span>
        </el-col>
        <el-col :span="18">
          <el-radio v-model="person.gender" label="1">男</el-radio>
          <el-radio v-model="person.gender" label="2">女</el-radio>
          <el-radio v-model="person.gender" label="3">保密</el-radio>
        </el-col>
      </el-row>
    </el-form-item>
    
    <el-form-item>
      <el-row class="mx-auto w-50">
        <el-col :span="6" class="text-end">
          <span>头像：</span>
        </el-col>
        <el-col :span="18">
          <el-upload :action="uploadPath" :on-success="imgOnSuccess">
            <img v-if="person.headUrl" :src="person.headUrl" class="headImg border"/>
            <el-icon v-else class="headImg border"><Plus /></el-icon>
          </el-upload>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item>
      <el-col class="text-center">
        <el-button type="primary" @click="saveAuthorInfo">保存</el-button>
        <el-button type="primary" @click="this.$router.push('/login')">退出</el-button>
      </el-col>
    </el-form-item>
  </el-form>
</template>

<script>
import { baseURL } from '@/axios/axios-http.js'
import auth from '@/auth/auth.js'
export default {
  name: "PersonFrame",
  components: {
  },
  data() {
    return {
      uploadPath:baseURL+"/api/upload",
      person: {
        username: null,
        password: null,
        headUrl: null,
        gender: null,
      },
    };
  },
  //显示图片
  methods: {
    imgOnSuccess(response){
      let downloadUrl = response.data
        this.person.headUrl = downloadUrl
    },
    loadAuthorInfo() {
      this.person = auth.getLoginUser();
    },
    saveAuthorInfo(){
      this.$axios
      .post("/api/space/person/edit",this.person)
      .then(response=>{
        let data = response.data
        if(data.code == 200){
          let nowLoginUser = data.data;
            auth.updateLoginUser(nowLoginUser)
        }
        alert(data.msg);
      })
    }
  },
  mounted(){
    this.loadAuthorInfo();
  },
};
</script>

<style >
  .headImg{
        width: 5rem;
        height: 5rem;
        border-radius: 10%;
  }
</style> 